<script setup>
import { reactive } from 'vue'
import DemoApi from '../api/DemoApi'

const state = reactive({ result: null, color: ''})

DemoApi.doLogin().then(res => {
  state.result= res
})
const showMessage = () => {
  DemoApi.doLogin().then(res => {
    alert(JSON.stringify(res))
  }).catch(err => {
    alert(JSON.stringify(err))
  })
}
</script>
<template>
  <div>
    hello I am workplace<a-button type="primary" @click="showMessage">Primary</a-button>
    <hr>
    <!-- <p v-for=" (item, idx) in route" :key="idx">
      {{ item }}
    </p> -->
    {{ state }}
    <hr>
    四川英雄 ={{ state.result }}
    <div class="radio-label">
      <input id="color1" v-model="state.color" type="radio" name="color" value="blue">
      <label for="color1">蓝色</label>
    </div>
    <div class="radio-label red">
      <input id="color2" v-model="state.color" type="radio" name="color" value="red">
      <label for="color2">红色</label>
    </div>
    <div class="radio-label">
      <input id="color3" v-model="state.color" type="radio" name="color" value="green">
      <label for="color3">绿色</label>
    </div>
    <h1>
      <span> 安全1 </span>
      <em> 安全1 </em>
    </h1>
    <div class="box">s</div>
    <h2>1</h2>
    <em>2</em>
    <h2>3</h2>
    <h2>4</h2>
  </div>
</template>
<style lang="less" scoped>
.box~h2 {
  background-color: aqua;
}
span+em {
  color: #cf112a;
}


</style>
